<template>
    <div id="pdfDom1" >
        <el-card class="" >
            <div style="border:2px solid #FF5C82;margin-top: 10px;padding: 20px 20px;">
                <div style="display:flex;">
                    <div style="font-weight:bold;">
                        姓名：{{ userinfo.username }}
                    </div>
                    <div style="font-weight:bold;margin-left: 50px;">
                        年龄：{{ userinfo.birth }}
                    </div>
                    <div style="font-weight:bold;margin-left: 50px;">
                        性别：{{ userinfo.sex==2?'男':'女' }}
                    </div>
                    <div style="font-weight:bold;margin-left: 50px;">
                        身高：{{ userinfo.height }}
                    </div>
                </div>
                <div style="display:flex;margin-top: 20px;">
                    <div style="font-weight:bold;">
                        体重：{{ userinfo.weight }}
                    </div>
                    <div style="font-weight:bold;margin-left: 50px;">
                       手机号：{{ userinfo.guardian_mobile }}
                    </div>
                </div>
            </div>
            <div style="border:2px solid #FF5C82;padding: 10px 20px;border-top: none;">
                <div style="font-size:20px;font-weight:bold;">
                    1、孕妇年龄小于16岁大于35岁(0-1分)  
                </div>
                <div style="margin-left:20px;margin-top: 10px;">
                    <el-radio-group v-model="radio1" class="ml-4" @change="radi1">
                        <el-radio label="1" size="large" border>是               <span  style="margin-left:50px">1分</span></el-radio>
                        <el-radio label="0" size="large" border>否               <span  style="margin-left:50px">0分</span></el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div style="border:2px solid #FF5C82;padding: 10px 20px;border-top: none;"  @change="radi2">
                <div style="font-size:20px;font-weight:bold;">
                    2、孕前BMI是否在正常范围(18.5-23.9)(0-1分)  
                </div>
                <div style="margin-left:20px;margin-top: 10px;">
                    <el-radio-group v-model="radio2" class="ml-4">
                        <el-radio label="0" size="large" border>BMI是正常范围               <span  style="margin-left:50px">0分</span></el-radio>
                        <el-radio label="1" size="large" border>BMI小于正常范围               <span  style="margin-left:50px">1分</span></el-radio>
                        <el-radio label="2" size="large" border>BMI大于正常范围               <span  style="margin-left:50px">1分</span></el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div style="border:2px solid #FF5C82;padding: 10px 20px;border-top: none;"  @change="radi3">
                <div style="font-size:20px;font-weight:bold;">
                    3、是否存在以下疾病情况 (0-1分) 
                </div>
                <div style="margin-left:20px;margin-top: 10px;margin-bottom: 10px;">
                    <el-radio-group v-model="radio3" class="ml-4">
                        <el-radio label="0" size="large" border>没有              <span  style="margin-left:50px">0分</span></el-radio>
                        <el-radio label="1" size="large" border>有               <span  style="margin-left:50px">1分</span></el-radio>
                    </el-radio-group>
                </div>
                <div style="margin-left:20px;">
                    <div class="risk_1 risk_3"> (1)高血压</div>
                    <div class="risk_1 risk_3">(2)高血糖</div>
                    <div class="risk_1 risk_3">(3)高血脂</div>
                    <div class="risk_1 risk_3">(4)贫血</div>
                    <div class="risk_1 risk_3">(5)下肢水肿</div>
                    <div class="risk_1 risk_3">(6)甲状腺功能异常</div>
                </div>
            </div>
            <div style="border:2px solid #FF5C82;padding: 10px 20px;border-top: none;"  @change="radi4">
                <div style="font-size:20px;font-weight:bold;">
                    4、怀孕期间每日饮食情况 (0-1分) 
                </div>
                <div style="margin-left:20px;margin-top: 10px;margin-bottom: 10px;">
                    <el-radio-group v-model="radio4" class="ml-4">
                        <el-radio label="0" size="large" border>饮食均衡               <span  style="margin-left:50px">0分</span></el-radio>
                        <el-radio label="1" size="large" border>摄入量减少(或不吃)的食物种类            <span  style="margin-left:50px">1分</span></el-radio>
                        <el-radio label="2" size="large" border>摄入量较多(或偏好)的食物种类            <span  style="margin-left:50px">1分</span></el-radio>
                      </el-radio-group>
                </div>
                <div style="margin-left:20px;">
                    <div class="risk_1 risk_3"> (1)蔬菜/水果</div>
                    <div class="risk_1 risk_3">(2)全谷/杂粮</div>
                    <div class="risk_1 risk_3">(3)蛋奶、豆制品</div>
                    <div class="risk_1 risk_3">(4)肉类(小于200g)</div>
                    <div class="risk_1 risk_3">(5)肉类(红肉为主)</div>
                    <div class="risk_1 risk_3">(6)海产</div>
                </div>
            </div>
            <div style="border:2px solid #FF5C82;padding: 10px 20px;border-top: none;"  @change="radi5">
                <div style="font-size:20px;font-weight:bold;">
                    5、怀孕期体重增长符合图表状况 (0-1分) 
                </div>
                <div style="margin-left:20px;margin-top: 10px;margin-bottom: 10px;">
                    <el-radio-group v-model="radio5" class="ml-4">
                        <el-radio label="0" size="large" border>是               <span  style="margin-left:50px">0分</span></el-radio>
                        <el-radio label="1" size="large" border>否            <span  style="margin-left:50px">1分</span></el-radio>
                      </el-radio-group>
                </div>
                <div style="margin-left:20px;">
                    <div class="risk_1 risk_3"> (1)低于正常增长</div>
                    <div class="risk_1 risk_3">(2)超出正常增长</div>
                </div>
                <div id="myChart2" :style="{ width: '50%', height: '550px', }"></div>

            </div>
            <div style="border:2px solid #FF5C82;padding: 10px 20px;border-top: none;">
                <div style="font-size:20px;font-weight:bold;">
                    总分：{{total}}
                </div>
                <div  style="margin-top:20px;margin-left: 20px;font-weight: bold;">
                    (0分：不存在营养不良风险,1-2分：中度营养不良风险,≥3分：重度营养不良风险)
                </div>
            </div>
            
        </el-card>

        
    </div>
   <div style="display:flex;">
      <div v-if="Prints" style="margin:20px 0px;background-color: #FF5C82;width: 10%;height: 40px;line-height: 40px;text-align: center;color: #fff;border-radius: 40px;margin-left: 20px;cursor: pointer;" @click="Pint1" >
          保存
      </div>
      <div v-if="Prints" style="margin:20px 0px;background-color: #FF5C82;width: 10%;height: 40px;line-height: 40px;text-align: center;color: #fff;border-radius: 40px;margin-left: 20px;cursor: pointer;" @click="Pint2" >
          打印
      </div>
   </div>
  
    
  
  </template>
  
  <script setup>
  import { Edit, CirclePlus, Search, Expand,  } from '@element-plus/icons-vue'
  import {defineComponent, onMounted, ref, watch, reactive} from 'vue'
  import Header from './common/Header.vue';
//   import ChildLeft from './common/ChildLeft.vue';
  import {useRoute, useRouter} from "vue-router"
  import http, {baseUrl} from "../utils/http";
  import Drawer from './common/Drawer.vue';
  import * as echarts from 'echarts'
  import {ElMessage, ElMessageBox} from "element-plus";
  import * as api from "../api/loginHttp";
  const route = useRoute()
  const router = useRouter()
  const labName = ref()
  const options=ref([ {
      value: '早餐',
      label: '早餐',
    },
    {
      value: '中餐',
      label: '中餐',
    },
    {
      value: '晚餐',
      label: '晚餐',
    },])
    const checkList = ref([])
  const tan =  ref(true)
  const loadings = ref(true)
  const list = ref({})
  const energy = ref(0)
  const energys=ref()
  const OilEnergy = ref(0)
  const drawer = ref(false)
  const radio1=ref('')
  const radio2=ref('')
  const radio3=ref('')
  const radio4=ref('')
  const radio5=ref('')
  const total=ref(0)
  const userinfo=ref({})
  const Prints=ref('true')

  const groupId = ref()
  const id = ref()
  const reportId =ref()
  const popWrite = ref(false)
  const popWriteDirection = ref('ttb')
  const pageList = async () => {
    await router.push({'path': '/pageList/' + groupId.value})
  }
  const size = ref('150%')
  
  const formInline = ref({
    Fat:'',
    FatMin:'',
    FatMax:'',
    Bone:'',
    BoneMin:'',
    BoneMax:'',
    Protein:'',
    ProteinMin:'',
    ProteinMax:'',
    Water:'',
    WaterMin:'',
    WaterMax:'',
    LBM:'',
    ICW:'',
    Weight:'',
    WeightMin:'',
    WeightMax:'',
    Muscle:'',
    MuscleMin:'',
    MuscleMax:'',
    PBF:'',
    PBFMin:'',
    PBFMax:'',
    SMM:'',
    SMMMin:'',
    SMMMax:'',
    BMI:'',
    BMIMin:'',
    BMIMax:'',
    WHR:'',
    WHRMin:'',
    WHRMax:'',
    Weight_control:'',
    Fat_control:'',
    Muscle_control:'',
    VFI:'',
    VFIMin:'',
    VFIMax:'',
    Edema:'',
    EdemaMin:'',
    EdemaMax:'',
    ECW:'',
    BMR:'',
    name: '',
  })
  const onSubmit = () => {
  console.log('submit!')
}


  //保存表格
  const Pint1=()=>{
    if(parseInt(radio1.value)){
      let arr=[parseInt(radio1.value),parseInt(radio2.value),parseInt(radio3.value),parseInt(radio4.value),parseInt(radio5.value),total.value];
      http.get('api/archives/addScreening?id='+ id.value +'&screening='+JSON.stringify(arr)).then((res)=>{
          if(res.data.code==1){
              ElMessage({
              message: '保存成功',
              type: 'success',
            })
          }
      })
      Prints.value=false;
      setTimeout(() => {
          }, 2000);
      setTimeout(()=>{
          Prints.value=true;   
      },3000)
    }else{
      ElMessage.error('请选择对应的分数')
    }
    
  }
  //打印表格
  const Pint2=()=>{
    // Prints.value=false;
    // setTimeout(() => {
    //       print({id:"#pdfDom1"});
    //     }, 2000);
    // setTimeout(()=>{
    //     Prints.value=true;   
    // },3000)
    const { href } = router.resolve({
      path:  "/GravidaRisks/"+groupId.value+"/"+id.value+'/'+reportId.value
    });
    window.open(href, "_blank");
  }
  const onHome = async () => {
    await router.push({'path': '/Home'})
  }
  const radi1=()=>{
    let num1=parseInt(radio1.value);
    console.log(parseInt(radio2.value),parseInt(radio4.value),'aaabbb')
    let num2=parseInt(radio2.value)=='NaN'?0:parseInt(radio2.value)==2?1:parseInt(radio2.value)==1?1:0;
    let num3=parseInt(radio3.value);
    let num4=parseInt(radio4.value)=='NaN'?0:parseInt(radio4.value)==2?1:parseInt(radio4.value)==1?1:0;
    let num5=parseInt(radio5.value);
    total.value=num1+num2+num3+num4+num5;
  }
  const radi2=()=>{
    let num1=parseInt(radio1.value);
    let num2=parseInt(radio2.value)=='NaN'?0:parseInt(radio2.value)==2?1:parseInt(radio2.value)==1?1:0;
    let num3=parseInt(radio3.value);
    let num4=parseInt(radio4.value)=='NaN'?0:parseInt(radio4.value)==2?1:parseInt(radio4.value)==1?1:0;
    let num5=parseInt(radio5.value);
    total.value=num1+num2+num3+num4+num5;
  }
  const radi3=()=>{
    let num1=parseInt(radio1.value);
    let num2=parseInt(radio2.value)=='NaN'?0:parseInt(radio2.value)==2?1:parseInt(radio2.value)==1?1:0;
    let num3=parseInt(radio3.value);
    let num4=parseInt(radio4.value)=='NaN'?0:parseInt(radio4.value)==2?1:parseInt(radio4.value)==1?1:0;
    let num5=parseInt(radio5.value);
    total.value=num1+num2+num3+num4+num5;
  }
  const radi4=()=>{
    let num1=parseInt(radio1.value);
    let num2=parseInt(radio2.value)=='NaN'?0:parseInt(radio2.value)==2?1:parseInt(radio2.value)==1?1:0;
    let num3=parseInt(radio3.value);
    let num4=parseInt(radio4.value)=='NaN'?0:parseInt(radio4.value)==2?1:parseInt(radio4.value)==1?1:0;
    let num5=parseInt(radio5.value);
    total.value=num1+num2+num3+num4+num5;
  }
  const radi5=()=>{
    let num1=parseInt(radio1.value);
    let num2=parseInt(radio2.value)=='NaN'?0:parseInt(radio2.value)==2?1:parseInt(radio2.value)==1?1:0;
    let num3=parseInt(radio3.value);
    let num4=parseInt(radio4.value)=='NaN'?0:parseInt(radio4.value)==2?1:parseInt(radio4.value)==1?1:0;
    let num5=parseInt(radio5.value);
    total.value=num1+num2+num3+num4+num5;
  }
  const onChange = async (index, value) => {
    list._rawValue[index].energy = (list._rawValue[index].single.energy * value).toFixed(2)
    list._rawValue[index].weight = (list._rawValue[index].single.weight * value).toFixed(2)
    list._rawValue[index].protein = (list._rawValue[index].single.protein * value).toFixed(2)
    list._rawValue[index].fat = (list._rawValue[index].single.fat * value).toFixed(2)
    list._rawValue[index].carbohydrate = (list._rawValue[index].single.carbohydrate * value).toFixed(2)
    list._rawValue[index].calcium = (list._rawValue[index].single.calcium * value).toFixed(2)
    list._rawValue[index].sodium = (list._rawValue[index].single.sodium * value).toFixed(2)
    list._rawValue[index].magnesium = (list._rawValue[index].single.magnesium * value).toFixed(2)
    list._rawValue[index].iron = (list._rawValue[index].single.iron * value).toFixed(2)
    list._rawValue[index].zinc = (list._rawValue[index].single.zinc * value).toFixed(2)
    list._rawValue[index].selenium = (list._rawValue[index].single.selenium * value).toFixed(2)
    list._rawValue[index].vitamin_a = (list._rawValue[index].single.vitamin_a * value).toFixed(2)
    list._rawValue[index].vitamin_e = (list._rawValue[index].single.vitamin_e * value).toFixed(2)
    list._rawValue[index].vitamin_b1 = (list._rawValue[index].single.vitamin_b1 * value).toFixed(2)
    list._rawValue[index].vitamin_b2 = (list._rawValue[index].single.vitamin_b2 * value).toFixed(2)
    list._rawValue[index].vitamin_c = (list._rawValue[index].single.vitamin_c * value).toFixed(2)
  
    energys.value = 0
    for (let i = 0; i < list._rawValue.length; i++) {
      energys.value +=(list._rawValue[i].energy)*1;
      console.log(list._rawValue[i].energy)
  
    }
  
  }
  
  const btn_fenxi = async() => {
    let params = {
      'id': reportId.value,
      'user_id':id.value,
      'diet_energy': energy._value,
      'diet':list._rawValue,
    }
  
    const data = await api.diet(params);
    
    if(data.data.code == 0) {
      ElMessage.error(data.data.msg)
      return false;
    } else {
      const { href } = await router.resolve({
        path:  "/Dietary/"+groupId.value+"/"+id.value+'/'+reportId.value
      });
      window.open(href, "_blank");
    }
  
  }
  
  const cancelClick = async() => {
    popWrite.value = false;
  }
  
  const confirmClick = async() => {
    Object.keys(formInline._rawValue).forEach(function(item, index) {
      //item 就是当日按循环到的对象
      //index是循环的索引，从0开始
        if (formInline._rawValue[item] == '') {
          ElMessage.error('必填项不能为空')
          return;
        }
      // console.log(formInline._rawValue[item]);
    })
  
  
  
    // for(let i = 0; i < Object.keys(formInline._rawValue).length; i++) {
    //   console.log(i);
    //   console.log(formInline._rawValue[i]);
    //   if (formInline.value[i] == '') {
    //     ElMessage.error('必填项不能为空')
    //     return false;
    //   }
    // }
  }
  
  const get_new = async() => {
    const res = await api.getFood();
  }
  
  // const handClick = async ()  => {
  //   console.log('手动输入体成分数据');
  // }
  
  const handClick = async ()  => {
    popWrite.value = true;
  }
  
  
  
  const appraisal = async ()  => {
    http.get('api/archives/analysis?id='+ id.value+'&type=analysis').then((res)=>{
      if(res.data.code === 0) {
        ElMessage.error(res.data.msg)
      }
    })
  }
  
  const guanbi = async ()  => {
    tan.value = false;
    http.get('api/archives/analysis?id='+ id.value+'&type=cancel').then((res)=>{
      if(res.data.code === 0) {
        ElMessage.error(res.data.msg)
      }
    })
  }
  
  const goto = async () => {
    const { href } = await router.resolve({
      path:  "/analysis/"+groupId.value+"/"+id.value+"/"+reportId.value
    });
    window.open(href, "_blank");
  }
  
  
  const btn = async() => {
    // // 只要点击文档，那么就将数据保存起来
    http.get('api/archives/setReportStatus?reportId='+ reportId.value).then((res)=>{
      if(res.data.code === 0) {
        ElMessage.error(res.data.msg)
        return false
      }
    })
    const { href } = await router.resolve({
      path:  "/reportView/"+groupId.value+"/"+id.value+"/"+reportId.value
    });
    window.open(href, "_blank");
  }
  
  const fetchData = async () => {
    if(parseInt(radio1.value)){
      total.value=parseInt(radio1.value)+parseInt(radio2.value)+parseInt(radio3.value)+parseInt(radio4.value);
    }else{
      total.value=0;
    }
    
    if(route.params.groupId) {
      groupId.value = route.params.groupId
      id.value = route.params.id
      reportId.value = route.params.reportId
      if (groupId.value == 3) {
        labName.value = '婴幼儿营养测评'
      } else if (groupId.value == 5) {
        labName.value = '孕产妇营养测评'
      } else if (groupId.value == 6) {
        labName.value = '成年人营养测评'
      } else if (groupId.value == 7) {
        labName.value = '慢性病营养测评'
      } else if (groupId.value == 8) {
        labName.value = '团体营养测评'
      }
    http.get('api/archives/evaluating?id='+ id.value).then((res)=>{
     console.log(res,'adadada')
     userinfo.value=res.data.data;
    })
       //获取营养风险筛查表
  http.get('api/archives/screeningInfo?id=' + route.params.id).then((res) => {
    if(res.data.data.screening){
      radio1.value=res.data.data.screening[0].toString();
      radio2.value=res.data.data.screening[1].toString();
      radio3.value=res.data.data.screening[2].toString();
      radio4.value=res.data.data.screening[3].toString();
      radio5.value=res.data.data.screening[4].toString();
      total.value=res.data.data.screening[5].toString();
    }
  })
  
    //获取echarts图标
    var BMI_1 = localStorage.getItem('bmi');
    if (BMI_1 == '偏瘦') {
      //低体重
      let weight1_min = ['0', '0', '0', '0', '0', '0', '0', '0', '1', '1.5', '2.5', '3.5', '4', '5', '5.5', '6.5', '7.5', '8', '9', '10', '10.5', '11'];
      let weight1_max = ['0', '0.25', '0.5', '0.75', '1', '1.5', '1.75', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'];
      let indexes2 = '';
      let index3 = [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42];
      let weekss = localStorage.getItem('weeks');
      let weight1 = localStorage.getItem('weight1');
      let weight2 = localStorage.getItem('weight2');
      let index = index3.findIndex(element => element == weekss);
      if (index !== -1) {
        indexes2 = `${index}`
      } else {
        for (let i = 0; i < index3.length; i++) {
          if (index3[i] - 1 == weekss) {
            indexes2 = i - 1
          }
        }
      }
      let myChart1 = echarts.init(document.getElementById("myChart2"));
      myChart1.value = myChart1;
      myChart1.setOption({
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: {
          name: '孕周数',
          type: 'category',
          data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42],
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
        },
        yAxis: {
          name: '增重(kg)',
          type: 'value',
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }

        },
        series: [
          {
            data: weight1_min,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: weight1_max,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: [
              [indexes2, `${weight1}` - `${weight2}`],
            ], // 用多维数组表示数据，每个子数组包含两个元素，分别表示x轴和y轴的值
            type: 'scatter'
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart1.resize();
      });
    } else if (BMI_1 == '正常') {
      //正常
      let weight2_min = ['0', '0', '0', '0', '0', '0', '0', '0', '0.5', '1', '2', '2.5', '3', '3.5', '4', '5', '5.5', '6', '6.5', '7', '7.5', '8'];
      let weight2_max = ['0', '0.25', '0.5', '0.75', '1', '1.5', '1.75', '2', '3', '4', '4.5', '5.5', '6.5', '7.5', '8', '9', '10', '11', '12', '12.5', '13.5', '14'];
      let indexes2 = '';
      let index3 = [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42];
      let weekss = localStorage.getItem('weeks');
      let weight1 = localStorage.getItem('weight1');
      let weight2 = localStorage.getItem('weight2');
      let index = index3.findIndex(element => element == weekss);
      if (index !== -1) {
        indexes2 = `${index}`
      } else {
        for (let i = 0; i < index3.length; i++) {
          if (index3[i] - 1 == weekss) {
            indexes2 = i - 1
          }
        }
      }
      let myChart1 = echarts.init(document.getElementById("myChart2"));
      myChart1.value = myChart1;
      myChart1.setOption({
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: {
          name: '孕周数',
          type: 'category',
          data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42],
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
        },
        yAxis: {
          name: '增重(kg)',
          type: 'value',
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }

        },
        series: [
          {
            data: weight2_min,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: weight2_max,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: [
              [indexes2, `${weight1}` - `${weight2}`],
            ], // 用多维数组表示数据，每个子数组包含两个元素，分别表示x轴和y轴的值
            type: 'scatter'
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart1.resize();
      });
    } else if (BMI_1 == '偏胖') {
      //超重
      let weight3_min = ['0', '0', '0', '0', '0', '0', '0', '0', '0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6', '6.5', '7'];
      let weight3_max = ['0', '0.25', '0.5', '0.75', '1', '1.5', '1.75', '2', '2.5', '3.5', '4', '4.5', '5.5', '6', '6.5', '7.5', '8', '8.5', '9.5', '10', '10.5', '11'];
      let indexes2 = '';
      let index3 = [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42];
      let weekss = localStorage.getItem('weeks');
      let weight1 = localStorage.getItem('weight1');
      let weight2 = localStorage.getItem('weight2');
      let index = index3.findIndex(element => element == weekss);
      if (index !== -1) {
        indexes2 = `${index}`
      } else {
        for (let i = 0; i < index3.length; i++) {
          if (index3[i] - 1 == weekss) {
            indexes2 = i - 1
          }
        }
      }
      console.log(indexes2)
      let myChart1 = echarts.init(document.getElementById("myChart2"));
      myChart1.value = myChart1;
      myChart1.setOption({
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: {
          name: '孕周数',
          type: 'category',
          data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42],
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
        },
        yAxis: {
          name: '增重(kg)',
          type: 'value',
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }

        },
        series: [
          {
            data: weight3_min,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: weight3_max,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: [
              [indexes2, `${weight1}` - `${weight2}`],
            ], // 用多维数组表示数据，每个子数组包含两个元素，分别表示x轴和y轴的值
            type: 'scatter'
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart1.resize();
      });
    } else if (BMI_1 == '肥胖') {
      //肥胖
      let weight4_min = ['0', '0', '0', '0', '0', '0', '0', '0', '0.5', '0.75', '1', '1.5', '2', '2.25', '2.5', '3', '3.5', '3.75', '4', '4.5', '4.75', '5'];
      let weight4_max = ['0', '0.25', '0.5', '0.75', '1', '1.5', '1.75', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6', '6.5', '7', '7.5', '8', '8.5', '9'];
      let indexes2 = '';
      let index3 = [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42];
      let weekss = localStorage.getItem('weeks');
      let weight1 = localStorage.getItem('weight1');
      let weight2 = localStorage.getItem('weight2');
      let index = index3.findIndex(element => element == weekss);
      if (index !== -1) {
        indexes2 = `${index}`
      } else {
        for (let i = 0; i < index3.length; i++) {
          if (index3[i] - 1 == weekss) {
            indexes2 = i - 1
          }
        }
      }
      console.log(indexes2)
      let myChart1 = echarts.init(document.getElementById("myChart2"));
      myChart1.value = myChart1;
      myChart1.setOption({
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: {
          name: '孕周数',
          type: 'category',
          data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42],
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
        },
        yAxis: {
          name: '增重(kg)',
          type: 'value',
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }

        },
        series: [
          {
            data: weight4_min,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: weight4_max,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          // {
          //   data: [
          //     [indexes2, `${weight1}` - `${weight2}`],
          //   ], // 用多维数组表示数据，每个子数组包含两个元素，分别表示x轴和y轴的值
          //   type: 'scatter'
          // }
        ]
      });
      window.addEventListener("resize", function () {
        myChart1.resize();
      });
    }
  
  
    } else {
      ElMessage.error('栏目编号不得为空')
      await router.push({'path': '/Home'})
    }
  
  }
  
  onMounted(() => {
    fetchData()
  })
  </script>
  
  <style scoped>
  
  
  @import '../assets/css/common.css';
  @media screen and (max-width:1920px) {
    .risk_1{
        margin-left: 30px;        
    }
    .risk_3{
        margin-bottom: 20px;        
    }
    .risk_2{
        margin-left: 10px;        
    }
  .right-box-card .all button{
    width: 85px;
    margin-right: 14px;
  }
  .el-drawer__body .drVal{
    padding-top: 50px;
  }
  }
  
  
  .BMIprimary {
    width: 268px;
    height: 70px;
    background: #FF5C82;
    opacity: 1;
    border-radius: 8px;
    font-size: 24px;
  }
  .BMIDefault {
    width: 268px;
    height: 70px;
    background: #fff;
    opacity: 1;
    color: #FF5C82;
    border-radius: 8px;
    font-size: 24px;
    border:1px solid #FF5C82;
  }
  .el-drawer__body {
    overflow: auto;
  }
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }
  
  ::v-deep .el-button:focus, .el-button:hover {
    background: #FF5C82;
    color: #fff;
  }
  ::v-deep  .el-progress-bar__inner {
    background: #FF5C82;
  }
  </style>
  <style>
  .right-box-card {
    margin-left: 2%;
    margin-top: 1%;
    position: static;
    top: calc(260px);
    width: 60%;
    float: left;
  
  }
  
  .right-box-card .all span{
    margin-right: 5px;
    font-size: 14px;
  }
  
  .right-box-card .all .num1{
    width: 100px;
    border: none;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #3ea4aa;
  }
  .num {
    width: 62px;
    border: none;
    text-align: center;
    background: #fff;
  }
  
  .right-box-card .all button {
    display: inline-block;
    width: 96px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #3ea4aa;
    border-radius: 3px;
    color: #ffffff;
    font-size: 16px;
    float: right;
    margin-right: 40px;
    margin-top: 70px;
    border: none;
  }
  </style>
  